import React from 'react'
import { Link, withRouter } from 'react-router-dom'
import { inject } from 'mobx-react';

import './index.scss';


import { Input, Tooltip, Icon, Button } from 'antd';



@inject('loginStore')
class Login extends React.Component {

    state = {
        logining: false,
        userName: '',
        pwd: '',
        loginBtnText: '请输入帐和密码后点击登陆'
    };

    submitLogin = () => {

        this.setState({
            logining: true,
            loginBtnText: '正在登陆...'
        })

        var that = this;

        setTimeout(function () {
            that.setState({
                loginBtnText: '登陆成功,进入首页...'
            })
        }, 100);

        setTimeout(function () {
            that.props.history.push('/entry');
        }, 500);

    }

    InputChanged(key, e) {
        this.setState({
            [key]: e.target.value
        })
    }

    allNotEmpty = () => {
        return this.state.userName.length > 0 && this.state.pwd.length > 0;
    }

    render() {
        return (
            <div className="LoginArea">

                <div className="LoginArea_Header">

                </div>
                <div className="LoginArea_Body">

                    <div className="each_line">
                        <Input
                            value={this.state.userName}
                            onChange={e => this.InputChanged('userName', e)}
                            size="large"
                            allowClear={true}
                            placeholder="手机号或邮箱"
                            prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            suffix={
                                <Tooltip title="11位手机号或中国大陆邮箱">
                                    <Icon type="info-circle" style={{ color: 'rgba(0,0,0,.45)' }} />
                                </Tooltip>
                            }
                        />
                    </div>
                    <div className="each_line">
                        <Input
                            value={this.state.pwd}
                            onChange={e => this.InputChanged('pwd', e)}
                            size="large"
                            allowClear={true}
                            placeholder="输入密码"
                            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            suffix={
                                <Tooltip title="">
                                    <Icon type="info-circle" style={{ color: 'rgba(0,0,0,.45)' }} />
                                </Tooltip>
                            }
                        />
                    </div>
                    <div className="each_line">
                        <Button onClick={this.submitLogin} disabled={!this.allNotEmpty()} size="large" block type='primary' icon="login" loading={this.state.logining} >
                            {this.state.loginBtnText}
                        </Button>
                    </div>

                </div>
                <div className="LoginArea_Footer"></div>



            </div>
        )
    }
}

export default withRouter(Login);